<script setup>
import DeviceList from './DeveceList.vue'
import { defineComponent, ref, provide } from 'vue';
import { Message } from '@arco-design/web-vue';


const collapsed = ref(false);
const onCollapse = (val, type) => {
    collapsed.value = val;
}

const deviceIds = ref([])//读取到的所有设备sn
const selectedDeviceIds = ref([])//选中的设备sn
provide('devices', {
    deviceIds,
    selectedDeviceIds,
})

</script>
<template>
    <a-layout class="layout-home">
      <a-layout-sider
        class="layout-sider"
        breakpoint="lg"
        :width="220"
        collapsible
        :collapsed="collapsed"
        @collapse="onCollapse"
      >
        <div class="layout-icon">
            <img src="../assets/icon.svg" alt="SVG Image" width="30px">
        </div>
        <a-menu
          :defaultSelectedKeys="['item1']"
        >
        <router-link to="/trace">
          <a-menu-item key="item1">
            <IconDashboard />
            Trace
          </a-menu-item>
        </router-link>
        <router-link to="/dex2oat">
          <a-menu-item key="item2">
            <icon-fire />
            Dex2oat
          </a-menu-item>
        </router-link>
        <router-link to="/appstart">
          <a-menu-item key="item3">
            <icon-thunderbolt />
            App Start
          </a-menu-item>
        </router-link>
        <router-link to="/tools">
          <a-menu-item key="item4">
            <icon-tool />
            Tools
          </a-menu-item>
        </router-link>
        <router-link to="/settings">
          <a-menu-item key="item5">
            <icon-settings />
            Settings
          </a-menu-item>
        </router-link>
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout style="padding: 0 15px; display: flex; flex-direction: column; height: 100%;">
          <a-layout-header>
            <DeviceList></DeviceList>
          </a-layout-header>
          <a-layout-content>
            <router-view></router-view>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
</template>

<style scoped>
.layout-home {
    height: 99.7vh;
    background: var(--color-fill-2);
    border: 1px solid var(--color-border);
}
.layout-home :deep(.layout-icon) {
    display: grid;
    place-items: center; /* 同时实现水平和垂直居中 */
    margin-top: 10px;
}
.layout-home :deep(.arco-layout-header) {
    height: 40px;
}
.layout-home :deep(.arco-layout-content) {
    flex-grow: 1; /* 这将使内容占据除了其他元素之外的所有剩余空间 */
    overflow-y: auto; /* 如果需要，可以添加滚动条 */
    margin-bottom: 10px;
    border-radius: 10px;
}
</style>
  